<template>
	<view class="content">
		<view class="head">
			<image src="../../static/headBack.png" mode="aspectFit"></image>
		</view>
		<view class="detail">
			<view class="img">
				<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in indexs.banner" :key="index" @click="mobal_to(item)">
						<view class="swiper-item">
							<image :src="item.image" mode="aspectFit"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="notice" v-if="indexs.inform.length != 0" @click="$framDate.navTo(`home/notice/list`)">
				<view class="title">
					<view class="no_img">
						<image src="../../static/icon.png" mode="aspectFit"></image>
					</view>
					<view class="no_title">
						公告：
					</view>
				</view>
				<view class="desc">
					{{indexs.inform[0].title}}
				</view>
			</view>
			<view class="style">
				<view class="left" @click="$framDate.navTo('index/index')">
					<view class="l_img">
						<image src="../../static/begin.png" mode="aspectFit"></image>
					</view>
					<view class="l_title">
						交暖气费
					</view>
				</view>
				<view class="right" @click="$framDate.navTo('record/list')">
					<view class="l_img">
						<image src="../../static/record.png" mode="aspectFit"></image>
					</view>
					<view class="l_title">
						缴费记录
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				indexs: {
					banner: [], 
					inform: [],
				}
			}
		},
		onLoad() {
			if(uni.getStorageSync('token')){
				this.load()
			}else{
				this.test();
			}
		},
		methods: {
			test(){
				let href = location.href;
				if(href.indexOf('code') != -1){
					let code = location.href.split('code=')[1].split('&state')[0];
					this.userLogin(code);
				}else{
					location.href = `${this.api.baseUrl}user/get_code`;	
				}
			},
			async userLogin(code){
				let res = await this.api.uniRequ(this.api.public.userLogin,{code:code},'get');
				if(res.code == 1){
					uni.setStorageSync('token',res.data.token);
					uni.setStorageSync('userInfo', res.data);
					if(uni.getStorageSync('href')){
						location.href = uni.getStorageSync('href');
					}
					this.load();
				}
			},
			async load(){
				let res = await this.api.uniRequ(this.api.public.index,{},'get');
				if(res.code == 1){
					this.indexs = res.data;
				}
			},
			mobal_to(item){
				this.$framDate.navTo(item.route)
			}
		}
	}
</script>

<style lang="scss">
	.detail{
		width: 90%;
		padding: 0 5%;
		position: relative;
		z-index: 1;
		top: -237rpx;
	}
	.img{
		width: 100%;
		height: 282rpx;
		swiper{
			width: 100%;
			height: 282rpx;
			swiper-item{
				width: 100%;
				height: 282rpx;
				.swiper-item{
					width: 100%;
					height: 282rpx;
					image{
						width: 100%;
						height: 282rpx;
						border-radius: 11rpx;
					}
				}
			}
		}
	}
	.notice{
		width: 94%;
		padding: 0 3%;
		margin-top: 33rpx;
		color: #344968;
		font-weight: bold;
		font-size: 26rpx;
		border:1px solid #E1E1E1;
		padding-bottom: 25rpx;
		border-radius: 8rpx;
		.title{
			width: 100%;
			height: 64rpx;
			line-height: 64rpx;
			display: flex;
			.no_img{
				width: 44rpx;
				height: 64rpx;
				text-align: center;
				image{
					width: 44rpx;
					height: 44rpx;
					margin-top: 10rpx;
				}
			}
			.no_title{
				width: calc(100% - 44rpx);
				height: 64rpx;
				line-height: 64rpx;
			}
		}
		.desc{
			line-height: 37rpx;
		}
	}
	.style{
		width: 100%;
		margin-top: 89rpx;
		display: flex;
		.left,
		.right{
			width: 45%;
			margin-left: 2.5%;
			.l_img{
				width: 100%;
				height: 278rpx;
				image{
					width: 278rpx;
					height: 278rpx;
				}
			}
			.l_title{
				width: 100%;
				font-size: 36rpx;
				height: 50rpx;
				margin-top: 37rpx;
				color: #344968;
				font-weight: bold;
				text-align: center;
			}
		}
		.right{
			margin-left: 5%;
		}
	}
</style>
